ShowTable of Contents
はじめに(完成形と効果)
ノーツのカテゴリと添付ファイルを表示するモバイルメニュー紹介アプリです。
この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込みにURL引数でカテゴリフィルタを使っているので、画面単位で作れるため開発生産性が高い点です。
準備する物
-
テキストフィールドと画像添付用のリッチテキストフィールド、添付された画像のファイル名を計算する複数値可能フィールドを配置します。
-
データは適当に項目を入力し、画像ファイルを添付しておきます。
作成するXPagesファイルの構成
下記の4つのXpagesを作成します。
|
Xpagesの名前
|
内容
|
|
cate1.xsp
|
1ページ目
リスト(ビュー)表示。カテゴリ1階層目。
|
|
cate2.xsp
|
2ページ目
リスト(ビュー)表示。カテゴリ2階層目。
|
|
cate3.xsp
|
3ページ目
リスト(ビュー)表示。イメージと文書を表示。
|
|
frm.xsp
|
4ページ目
フォーム表示。
|
jQueryMobileをNSFファイルに組み込む
１．ｊQueryのHPからjQueryとjQueryMobileをダウンロードします。
※バージョンが変わっている場合はこちらから
http://jquery.com/download/
http://jquerymobile.com/download/
２．ダウンロードしたjquery.mobile-1.3.0.zipを適当なフォルダに解凍します。
３．jQueryを組み込みたいノーツアプリケーションを開き、設計要素から「リソース－ファイル」を開きます。
４．[ファイルリソースのインポート]ボタンを押し、ダウンロードしたjQuery、jQueryMobileを登録します。
|
種類
|
ファイル名
|
補足
|
|
JavaScriptライブラリ
|
jquery-1.9.1.min.js
|
|
|
JavaScriptライブラリ
|
jquery.mobile-1.3.0.min.js
|
jquery.mobile-1.3.0.zipを解凍したファイル
|
|
スタイルシート
|
jquery.mobile-1.3.0.min.css
|
jquery.mobile-1.3.0.zipを解凍したファイル
|
【イメージ】
５．jquery.mobile-1.3.0.zipを解凍したフォルダから画像ファイルをイメージリソースに登録します。
標準ではpngファイルが選択できないので、ファイル名に「*.*」と入力し、全てのファイルを表示させます。
取り込んだファイルにはフォルダ名がつかないので、名前の変更を使ってファイル名の前に「images/」というパスを追加します。
|
フォルダ
|
ファイル名(ファイルシステム)
|
インポート後の名前(イメージリソース)
|
|
images
|
ajax-loader.gif
|
images /ajax-loader.gif
|
|
images
|
icons-18-black.png
|
images /icons-18-black.png
|
|
images
|
icons-18-white.png
|
images /icons-18-white.png
|
|
images
|
icons-36-black.png
|
images /icons-36-black.png
|
|
images
|
icons-36-white.png
|
images /icons-36-white.png
|
【イメージ】
XPagesにjQueryMobileを組み込む
-
新規Xpagesを作成し、ソースタブにjquery moibileを組み込むためのタグを書き込みます。Xpagesのプロパティ－リソースからファイルを順番に選択しても同様の操作が可能です。
【XPagesソース】
<xp:this.resources>
<xp:script src="/jquery-1.9.1.min.js" clientSide="true"></xp:script>
<xp:script src="/jquery.mobile-1.3.0.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet href="/jquery.mobile-1.3.0.min.css"></xp:styleSheet>
</xp:this.resources>
【イメージ】
1ページ目：ビューのカテゴリを表示する①
１．データリソースとしてカテゴリのビューを登録します。
【イメージ】
２．1ページ目はカテゴリのみ表示するため、データソースプロパティの「expandLevel」に“１”を指定します。
【イメージ】
３．XpagesのソースにjQueryMobileでヘッダー、コンテンツの基本構文となるタグを入力します。(データソースが指定してあるタグの下)
【XPagesソース】
<!--ページの設定-->
<div data-role="page">
<!--ヘッダの設定-->
<div data-role="header">
</div>
<!--コンテンツの設定-->
<div data-role="content">
</div>
</div>
【イメージ】
４．テーマカラーを変更したい場合には、＜div＞タグに「data-theme」を指定します。
【XPagesソース】
<!--ページの設定-->
<div data-role="page" data-theme="b">
５．ヘッダータグに内容を設定します。
【XPagesソース】
<div data-role="header">
<h1>分類</h1>
</div>
６．コンテンツの中に＜ul＞タグを配置し、ListViewを作ります。
【XPagesソース】
<!--コンテンツの設定-->
<div data-role="content">
<ul data-role="listview">
</ul>
</div>
【イメージ】
７．右のコンテナコントロールから繰り返しコントロールをドラッグ＆ドロップでListViewタグの下に配置し、繰り返しコントロールの名前(デフォルトはrepeat1を消します。(名前が残っているとjquery mobileのスタイルが反映されません。)
【XPagesソース】
<!--コンテンツの設定-->
<div data-role="content>
<ul data-role="listview">
<xp:repeat rows="30" value="#{view1}">
</xp:repeat>
</ul>
</div>
８．ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名に「dataRow」と設定します。
【イメージ】
９．＜li＞タグを入れます。
【XPagesソース】
<ul data-role="listview">
<xp:repeat rows="9999" value="#{view1}">
<li>
</li>
</xp:repeat>
</ul>
９．右のコアコントロールからリンクコントロールをドラッグ＆ドロップで＜li＞タグの下に配置し、ラベルを消します。
【XPagesソース】
<xp:repeat value="#{view1}" var="dataRow" rows="9999">
<li>
<xp:link escape="true" id="link1">
</xp:link>
</li>
</xp:repeat>
１０．右のコアコントロールから計算結果フィールドをドラッグ＆ドロップでリンクコントロールの下に配置します。
【XPagesソース】
<li>
<xp:link escape="true" id="link1">
<xp:text escape="true"
id="computedField1">
</xp:text>
</xp:link>
</li>
１１．リンクコントロールを選択し、オプション－リンクタイプ－URLの横にある◇をクリックし、2ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。
【SSJSソース】
"/cate2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)
【イメージ】
１１．計算結果フィールドを選択し、値－使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。
【SSJSソース】
dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null
【イメージ】
１２．スマートフォンの画面にあわせるため、サイズをデバイスの幅に指定するHTMLをXPagesソースに書き込みます。(データソース指定の下あたり)
【XPagesソース】
<!-- サイズをデバイスの幅に設定、倍率を固定-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
【イメージ】
2ページ目：ビューのカテゴリを表示する②
１．1ページ目(cate1.xsp)をコピーし、2ページ目(cate2.xsp)にリネームします。
２．2ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。
【XPagesソース】
<div data-role="header">
<h1>種別</h1>
</div>
２．リンクコントロールを選択し、オプション－リンクタイプ－URLの横にある◇をクリックし、3ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。(URL引数から1階層目、クリックした列から2階層目を取得)
【SSJSソース】
"/cate3.xsp?OpenXpage&categoryFilter=" + param.get("categoryFilter") + "\\" + dataRow.getColumnValues().get(1)
【イメージ】
３．計算結果フィールドを選択し、値－使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。(2列目を取得)
【SSJSソース】
dataRow.isCategory() ? dataRow.getColumnValues().get(1) : null
【イメージ】
3ページ目：ビューの文書を表示する
１．1ページ目(cate1.xsp)をコピーし、3ページ目(cate3.xsp)にリネームします。
２．3ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。
【XPagesソース】
<div data-role="header">
<h1>メニュー</h1>
</div>
３．リンクコントロールを選択し、オプション－リンクタイプ－URLの横にある◇をクリックし、4ページ目のXpagesを指定し、URL引数にdocumentIdを設定します。
【SSJSソース】
"/frm.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();
【イメージ】
４．リンクコントロールを選択し、オプション－リンクイメージを追加にチェックを付け、イメージの横にある◇をクリックし、添付ファイル画像を表示する式を書き込みます。(表示される添付ファイルは一つ目)
【SSJSソース】
"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)
【イメージ】
４．計算結果フィールドを選択し、値で単純データバインディングを選択肢、データソース「dataRow」、バインド先「Subject(件名)」を選択します。(dataRowは繰り返しコントロールのコレクション名)
【XPagesソース】
<!-- 品名 -->
<xp:text escape="true" id="computedField1"
value="#{dataRow.Subject}">
</xp:text>
【イメージ】
５．右のコアコントロールから計算結果フィールドをドラッグ＆ドロップで品名用の計算結果フィールドの下に配置し、単純データバインディングでデータソース「dataRow」、バインド先「Price(金額)」を選択します。
【XPagesソース】
<!-- 金額 -->
<xp:text escape="true" id="computedField2"
value="#{dataRow.Price}">
</xp:text>
６．体裁を整えるために、品名用の計算結果フィールドを＜h1＞タグで囲い、金額用の計算結果フィールドを＜p＞タグで囲います。
【XPagesソース】
<!-- 品名 -->
<h1>
<xp:text escape="true" id="computedField1"
value="#{dataRow.Subject}">
</xp:text>
</h1>
<!-- 金額 -->
<p>
<xp:text escape="true" id="computedField2"
value="#{dataRow.Price}">
</xp:text>
</p>
７．必要に応じて、計算結果フィールドの値の表示タイプやスタイルを変更して下さい。
4ページ目：フォームを表示する
１．1ページ目(cate1.xsp)をコピーし、4ページ目(frm.xsp)にリネームします。
２．4ページ目のXPagesを開き、データソースを選択、Dominoビューのデータソースを削除し、Domino文書のデータソースを追加。フォームを選択し、デフォルトアクションには「文書を開く」を選択します。
【イメージ】
３．ソースタブでヘッダーの内容を変更します。
【XPagesソース】
<div data-role="header">
<h1>詳細</h1>
</div>
４．繰り返しコントロールと、その中に挟まれたXPagesソースを削除します。
５．Listviewの中に＜li＞タグを配置し、計算結果フィールドで「Subject(品名)」と「Price(金額)」を表示します。
【XPagesソース】
<ul data-role="listview">
<li>
<!-- 品名 -->
<h1>
<xp:text escape="true" id="computedField1"
value="#{document1.Subject}">
</xp:text>
</h1>
<!-- 金額 -->
<p>
価格：
<xp:text escape="true" id="computedField2"
value="#{document1.Price}">
</xp:text>
</p>
</li>
</ul>
６．Listviewの下に繰り返しコントロールを配置します。(複数の添付ファイル画像を表示するため)
７．繰り返しコントロールを選択し、名前を削除、単純データバインディングで添付ファイル名の入っているフィールドを選択する。コレクション名には「filelist」と入力します。
【Xpagesソース】
<xp:repeat rows="30" value="#{document1.ImageFileNameList}"
var="filelist">
</xp:repeat>
【イメージ】
８．繰り返しコントロールのタグ内にイメージコントロールを配置し、イメージリソースに添付ファイルを読み込むコードを書き込みます。(一番後ろの「filelist」は繰り返しコントロールのコレクション名)
【SSJSソース】
"/"+document1.getDocument().getUniversalID()+"/$File/"+filelist
【イメージ】
戻るボタンを作る
-
ヘッダー部分に戻るボタンを追加するには、2ページ目以降のpageコントロールを下記のように書き換えます。
【Xpagesソース】
<div data-role="page" data-add-back-btn="true" data-theme="b">
<!--ヘッダの設定-->
<div data-role="header">
<a href="" data-rel="back">戻る</a>
<h1>種別</h1>
</div>